<template>
  <div class="comp-columns" 
    :style="{
      width: `${200 * columns.length || 0}px`
    }">

    <visual-data-column 
      v-for="(column, index) in columns" :key="index"
      ref="columnInfo"
      :column="column"
      :table-name="tableName"
      :data-id="dataId"
      :field-list="fieldList"
      :column-filters="columnFilters"
      @column-filter="setColumnFilter"
      @activecolumn="activeColumn"
      @togglefield="toggleField"
    />
    
    <!-- <columnInfo 
      v-for="(column, index) in columns" :key="index"
      ref="columnInfo"
      :column="column"
      :tableName="tableName"
      :dataId="dataId"
      :fieldList="fieldList"
      @activecolumn="activeColumn"
      @togglefield="toggleField">
    </columnInfo> -->
  </div>
</template>
<script lang="ts">
import { isFunction } from 'lodash'
import Vue from 'vue'
// import columnInfo from './columnInfo.vue'
import VisualDataColumn from './VisualDataColumn.vue'

export default Vue.extend({
  components: {
//    columnInfo,
    VisualDataColumn
  },
  props: {
    tableName: {
      type: String,
      default(){
        return  ''
      }
    },
    dataId: {
      type: [String, Number],
      default(){
        return ''
      }
    },
    columns: {
      type:Array,
      default(){
        return []
      }
    },
    fieldList: {
      type:Array,
      default(){
        return  []
      }
    }
  },
  data(){
    const columnFilters:any[] = []
    return {
      columnInfos: [],
      columnFilters
    }
  },
  watch: {
    columns: {
      deep: true,
      immediate: true,
      handler(){
        this.$nextTick(()=>{
          const columnInfos = this.$refs.columnInfo
          if(columnInfos){
            (columnInfos as Array<any>).forEach((columnInfoVue:any) => {
              if(isFunction(columnInfoVue.init)){
                columnInfoVue.init()
              }
            })
          }
        })
      }
    }
  },
  methods: {
    activeColumn(column:any){
      this.$emit('activecolumn', column)
    },
    toggleField(column:any) {
      this.$emit('togglefield', column)
    },
    setColumnFilter(columnFilters:any[]) {
      this.columnFilters = columnFilters
    }
  }
})
</script>
<style lang="less" scoped>
.comp-columns {
  background: #f8f8f8;
  display: flex;
  flex-flow: row;
  flex-wrap: nowrap;
  height: 400px;
}
</style>